﻿.mcn-splashcreen {
    position: fixed;
    z-index: 3000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #081a4a;
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr;

    #mcn-splashcreen-image {
        -ms-grid-row-align: center;
        -ms-grid-column-align: center;
        max-width: 100%;
    }

    #mcn-splashcreen-loader {
        display: -ms-inline-grid;
        -ms-grid-row-align: center;
        -ms-grid-column-align: center;
        margin-top: 340px;
        -ms-grid-rows: 1fr;
        -ms-grid-columns: auto auto;
        color: white;




        .cordova-ring {
            position: absolute;
            width: 30px;
            top: 15px;
            height: 30px;
            background: #3498db;
            border-radius: 50px;
            -webkit-animation: cordova-ring 1.5s infinite linear;
        }

        .cordova-ring:after {
            position: absolute;
            width: 50px;
            height: 50px;
            border-top: 10px solid #9b59b6;
            border-bottom: 10px solid #9b59b6;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-radius: 50px;
            content: '';
            top: -20px;
            left: -20px;
            -webkit-animation: cordova-ring_after 1.5s infinite linear;
        }

        @-webkit-keyframes cordova-ring {
            0% {
                -webkit-transform: rotate(0deg);
            }

            50% {
                -webkit-transform: rotate(180deg);
                background: #2ecc71;
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @-webkit-keyframes cordova-ring_after {
            0% {
                border-top: 10px solid #9b59b6;
                border-bottom: 10px solid #9b59b6;
            }

            50% {
                border-top: 10px solid #3498db;
                border-bottom: 10px solid #3498db;
            }

            100% {
                border-top: 10px solid #9b59b6;
                border-bottom: 10px solid #9b59b6;
            }
        }

        progress {
            width: 40px;
            height: 40px;
            color: white;
        }

        .mcn-splashcreen-loader-text {
            -ms-grid-column: 2;
            font-size: 16pt;
            -ms-grid-row-align: center;
            margin-left: 20px;
        }
    }
}


.mcn-cordova.mcn-splashcreen #mcn-splashcreen-loader {
    display: flex;
}
